<template>
  <div class="person-stat">
    <div class="wrap-1">
      <div class="icon"/>
      <div class="line"/>
      <div class="stat-box">
        <div class="title">
          宿舍考勤总人数
        </div>
        <div class="number">
          {{ data.kqrs }}
        </div>
        <div v-if="data.text" class="infoText flex-center">
          {{ data.text || '' }}
          <div class="time" v-if="data.type === 3">
            {{ dayjs().subtract(1, "day").format("YYYY-MM-DD") }}
          </div>
        </div>
      </div>
    </div>
    <div class="wrap-2">
      <div class="wrap-21">
        <div class="icon"/>
        <div class="number">
          {{ data.ygrs }}
        </div>
        <div class="title">
          已归人数
        </div>
      </div>
      <div class="wrap-22" @click="$emit('weigui')">
        <div class="icon"/>
        <div class="number">
          {{ data.wgrs }}
        </div>
        <div class="title">
          未归人数
        </div>
      </div>
      <div class="wrap-23" @click="$emit('wangui')">
        <div class="icon"/>
        <div class="number">
          {{ data.laters }}
        </div>
        <div class="title">
          晚归人数
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {inject} from "@vue/runtime-core";
import dayjs from "dayjs";

const smartObject = inject("smartObject");
defineProps({
  data: {
    type: Object,
    default: {
      ygrs: 0,
      wgrs: 0,
      laters: 0,
      kqrs: 0,
    }
  },

});
defineEmits(["weigui", "wangui"]);
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
